<template>
  <div class="user-info-page">
    <!-- 用户基本信息 -->
    <el-card class="user-info-card">
      <img :src="user.avatar" alt="用户头像" class="user-avatar" />
      <h2>{{ user.name }}</h2>
      <p>邮箱：{{ user.email }}</p>
    </el-card>

    <!-- 收藏列表 -->
    <div class="favorites-section">
      <h3>收藏的餐厅</h3>
      <el-table :data="user.favorites" style="width: 100%">
        <el-table-column prop="name" label="餐厅名称" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="viewRestaurant(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 历史记录 -->
    <div class="history-section">
      <h3>历史操作记录</h3>
      <el-timeline>
        <el-timeline-item v-for="record in user.history" :key="record.id" :timestamp="record.time">
          {{ record.action }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        avatar: '/images/avatar-a.jpg',
        name: '用户A',
        email: 'usera@example.com',
        favorites: [
          { id: 1, name: '美味餐厅A' },
          { id: 2, name: '风味餐厅B' },
        ],
        history: [
          { id: 1, action: '收藏了美味餐厅A', time: '2024-11-25' },
          { id: 2, action: '评论了风味餐厅B', time: '2024-11-26' },
        ],
      },
    };
  },
  methods: {
    viewRestaurant(id) {
      this.$router.push(`/restaurant/${id}`);
    },
  },
};
</script>

<style scoped>
.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}
</style>
